<template>
	<view class="address-box">
		<view v-if="address_list.length <= 0" class="fz18 bold zhong">
			暂无收货地址
		</view>
		<view v-else class="address-card-box mb10" v-for="(item,index) in address_list" :key="index"
			@click="goConfig(item)">
			<view class="addres-title-box mb10">
				<view class="fz15 bold flex mb10">
					<view class="mr10">
						{{item.consignee}}
					</view>
					<view class="">
						{{item.phone}}
					</view>
				</view>
				<view class="c9 fz14">
					{{item.province_name}} {{item.city_name}} {{item.area_name}} {{item.address}}
				</view>
			</view>
			<view class="space-between">
				<view class="set-default-box flex align-c" @click.stop="setDefault(item,index)">
					<image class="mr10" v-if="Number(item.is_default)" src="../../../static/my/select_icon.png" mode="">
					</image>
					<image class="mr10" v-if="!Number(item.is_default)" src="../../../static/my/unselected_icon.png"
						mode="">
					</image>
					<view class="fz14" :class="{'select-default-address':Number(item.is_default)}">
						{{Number(item.is_default) ? '默认地址' : '设为默认'}}
					</view>
				</view>
				<view class="fz13 flex">
					<view class="flex align-c mr25" @click.stop="jumpPath('/pages/subpackage/my/addAddress?id='+item.id)">
						<image class="edit-icon mr5" src="../../../static/my/compile_icon.png" mode=""></image>
						编辑
					</view>
					<view class="flex align-c" @click="delAddress(item)">
						<image class="delete-icon mr5" src="../../../static/my/delete_icon.png" mode=""></image>
						删除
					</view>
				</view>
			</view>
		</view>
		<!-- 确认 -->
		<view class="new-btn-box" @click="jumpPath('/pages/subpackage/my/addAddress')">
			添加新地址
		</view>
	</view>
</template>

<script>
	import {
		getAddressList,
		editAddredss,
		delAddress,
	} from '@/network/loginAndMy.js'
	export default {
		data() {
			return {
				address_list: [], //地址列表
				// 判断页面跳转 type==1跳转到订单页
				type: ''
			}
		},
		onShow() {
			this.getAddressList()
		},
		onLoad(option) {
			if (option.type) {
				this.type = option.type
			}
		},
		methods: {
			// 设置默认地址
			setDefault(item) {
				let params = {
					id: item.id,
					is_default: 1,
					consignee: item.consignee,
					phone: item.phone,
					area_text: `${item.province_name}-${item.city_name}-${item.area_name}`,
					address: item.address,
				}
				editAddredss(params).then(res => {
					if (res.code == 1) {
						this.getAddressList()
					}
				})
			},
			// 跳转页面
			jumpPath(path) {
				uni.navigateTo({
					url: path
				});
			},
			// 删除收货地址
			delAddress(item) {
				let _this = this
				uni.showModal({
					content: '确定要删除该地址吗？',
					success: function(res) {
						if (res.confirm) {
							delAddress({
								id: item.id
							}).then(res => {
								if (res.code == 1) {
									_this.getAddressList()
								}
							})
						}
					}
				});
			},
			// 获取地址列表
			getAddressList() {
				getAddressList().then(res => {
					if (res.code == 1) {
						this.address_list = res.data
					}
				})
			},
			// 跳转到确认订单页面
			goConfig(item) {
				this.setDefault(item)
				setTimeout(()=>{
					if (this.type == 1) {
						uni.navigateBack({
							delta: 1
						})
					}
				},500)
				
			}
		}
	}
</script>

<style lang="scss">
	.address-box {
		background-color: #F3F3F3;
		padding: 21rpx 30rpx 120rpx;
		height: 100vh;
		box-sizing: border-box;
		width: 100%;
		overflow-y: scroll;

		.address-card-box {
			padding: 30rpx 20rpx 20rpx;
			background-color: #ffffff;
			border-radius: 10rpx;

			.addres-title-box {
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #E6E6E6;
			}

			.set-default-box {
				image {
					width: 36rpx;
					height: 36rpx;
				}

				.select-default-address {
					background: linear-gradient(0deg, #b07412 0%, #e3ba5b 100%);
					color: transparent;
					-webkit-background-clip: text;
				}
			}

			.edit-icon {
				width: 35rpx;
				height: 31rpx;
			}

			.delete-icon {
				width: 28rpx;
				height: 30rpx;
			}
		}

		.new-btn-box {
			width: 690rpx;
			height: 90rpx;
			border-radius: 5rpx;
			background: linear-gradient(0deg, #b07412 0%, #e3ba5b 100%);
			line-height: 90rpx;
			text-align: center;
			color: #ffffff;
			position: fixed;
			bottom: 20rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>